<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <title>Document</title>
    <style>
        /* 定义进入和离开时候的过渡状态 */
        .fade-enter-active, .fade-leave-active {
            /*transition: opacity 2s*/
             transition: all 0.2s ease;
           position: absolute;
        }
        /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
        .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
           /* opacity: 0*/
            opacity: 0;
           transform: translateX(100px);
        }
        /* 钩子函数部分 */
        .show{
            transition: all 4s ease;
            }
        
        /* 列表过渡 */
        .list-enter,
        .list-leave-to {
        opacity: 0;
        transform: translateY(10px);
        }

        .list-enter-active,
        .list-leave-active {
        transition: all 0.3s ease;
        }

        /* 元素改变定位的缓动效果 */
        .list-move{
        transition: all 0.3s ease;
        } 

        </style>
</head>
<body>  
    <div id = "test1">
        <button v-on:click = "show = !show">点我</button>
        <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
        </transition>
    </div>
    <div id = "test2">
        <input type="button" value="戳我进入" @click="flag=!flag">
        <!--duration表示进出场时间,可以分别设置和独立设计-->
        <transition enter-active-class="animate__animated animate__backInDown" leave-active-class="animate__animated animate__backOutUp" :duration="{ enter: 500, leave: 800 }"
        >
            <!--需求：点击按钮，让p显示，再点击，让p隐藏-->
            <p v-if="flag">{{msg}}</p>
        </transition>
    </div>
    <div id="test3">
            <!-- 钩子函数 -->
            <input type="button" value="切换动画" @click="isshow = !isshow">
            <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
              <div v-if="isshow" class="show">OK</div>
            </transition>
    </div>
    <div id="test4"> 
        <!-- 这里的transition-group会被渲染成为span 所以要用tag 让浏览器知道它要被渲染成为ul -->
        <input type="text" v-model="txt" @keyup.enter="add">​ 
        <transition-group tag="ul" name="list">   
            <li v-for="(item, i) in list" :key="i">{{item}}</li> 
        </transition-group>
        <button v-on:click="remove">Remove</button>
    </div>
    <script type = "text/javascript">
 
        var vm = new Vue({
        el: '#test1',
            data: {
                show:true,
                styleobj :{
                    fontSize:'30px',
                    color:'red'
                }
            },
            methods : {
            }
        });
        var app = new Vue({
        el: '#test2',
        data: {
            msg: 'hellfo  vue.js.',
            flag: false
        } 
    });
    var app2 = new Vue({
        el: '#test3',
        data: { 
            isshow: false
        },
        methods: {
            beforeEnter(el) { // 动画进入之前的回调
                el.style.transform = 'translateX(100px)';
            },
            enter(el, done) { // 定义了动画的终止状态 这里的done其实等于下面的afterEnter函数
                el.offsetWidth;
                el.style.transform = 'translateX(600px)';
                done();//函数结束调用下面afterEnter函数 直接comment掉的话，就不执行afterEnter
            },
            afterEnter(el) { // 定义了动画完成之后的回调函数
                this.isshow = !this.isshow;
            }
        }
    })
 var app3 = new Vue({
   el: '#test4',
   data: {
     txt: '',
     list: [1, 2, 3, 4]
   },
   methods: {
     add() {
       this.list.push(this.txt);
       this.txt = '';
     },
     randomIndex: function () {
      return Math.floor(Math.random() * this.list.length)
    },
     remove: function () {
      this.list.splice(this.randomIndex(), 1)
    },
   }
 });
    </script>
</body>
</html>